<template>
<div :class="[$style.container]" v-loading="loading">
  <ul :class="[$style.list]">
    <li :class="[$style.item]" v-for="(row, i) in pageData.rows" :key="i"><slot :row="row"></slot></li>
  </ul>
  <div :class="[$style.pagination]">
    <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize"
    :current-page="currentPage" @current-change="onCurrentChange"></el-pagination>
  </div>
</div>
</template>

<script lang="ts">

import { PageData } from '@/config/page'
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({
  components: { }
})
export default class PagedList extends Vue {
  @Prop() pageData!: PageData<any>

  get total () {
    return this.pageData.total
  }

  get pageSize () {
    return this.pageData.params.size
  }

  get currentPage () {
    return this.pageData.params.page + 1
  }

  set currentPage (page: number) {
    this.pageData.gotoPage(page - 1)
  }

  get loading () {
    return this.pageData.loading
  }

  onCurrentChange (page: number) {
    this.currentPage = page
  }

  $style!: any
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item {
  padding: 0;
  margin: 0;
}

.pagination {
  margin-top: 12px;
  text-align: right;
}
</style>
